<template>
  <div class="menu" >
    <Menu style="margin-right: -1px" width="auto">
      <Submenu style="border: none" name="1" v-if="this.uType==1">
        <template slot="title">
          <Icon class="primary-linear" type="ios-paper" />
          代宰户
        </template>
        <MenuItem name="1-1" to="/squeryfarms">代宰户管理</MenuItem>
        <MenuItem name="1-2" to="/saddfarms">增加代宰户</MenuItem>
      </Submenu>
      <Submenu name="2" v-if="this.uType==1">
        <template slot="title">
          <Icon type="ios-people" />
          生猪入场
        </template>
        <MenuItem name="2-1" to="/squeryeo">入场信息管理</MenuItem>
        <MenuItem name="2-2" to="/saddeo">新增入场</MenuItem>
      </Submenu>
      <Submenu name="3" v-if="this.uType==1">
        <template slot="title">
          <Icon type="ios-stats" />
          宰杀出场
        </template>
        <MenuGroup title="交易">
          <MenuItem name="3-1" to="/squerylo">出场订单管理</MenuItem>
          <MenuItem name="3-2" to="/saddlo">新增出场</MenuItem>
        </MenuGroup>
      </Submenu>
      
      <Submenu style="border: none" name="4" v-if="this.uType==2">
        <template slot="title">
          <Icon class="primary-linear" type="ios-paper" />
          批发商
        </template>
        <MenuItem name="4-1" to="/pquerysalers">批发商管理</MenuItem>
        <MenuItem name="4-2" to="/paddsalers">增加批发商</MenuItem>
      </Submenu>
      <Submenu name="5" v-if="this.uType==2">
        <template slot="title">
          <Icon type="ios-people" />
          商品订单
        </template>
        <MenuItem name="5-1" to="/pqueryeo">订单信息管理</MenuItem>
      </Submenu>

      <Submenu style="border: none" name="7" v-if="this.uType==3">
        <template slot="title">
          <Icon class="primary-linear" type="ios-paper" />
          零售商
        </template>
        <MenuItem name="7-1" to="/rqueryretailers">零售商管理</MenuItem>
        <MenuItem name="7-2" to="/raddretailers">新增零售商</MenuItem>
      </Submenu>
      <Submenu name="8" v-if="this.uType==3">
        <template slot="title">
          <Icon type="ios-people" />
          商品入场
        </template>
        <MenuItem name="8-1" to="/rqueryeo">入场信息管理</MenuItem>
      </Submenu>
      
      <Submenu name="9" v-if="this.uType==4">
        <template slot="title">
          <Icon type="ios-stats" />
          检疫
        </template>
        <MenuItem name="9-1" to="/checkin">检疫</MenuItem>
      </Submenu>

      <Submenu name="10" v-if="this.uType==5">
        <template slot="title">
          <Icon type="ios-stats" />
          管理
        </template>
        <MenuItem name="10-1" to="/manager">用户管理</MenuItem>
      </Submenu>
    </Menu>

  </div>
</template>

<script>
export default {
  mounted(){
    this.uType=localStorage.getItem('uType')
  },
  watch:{
    uType:function(val){
      this.uType=val;
    }
  },
  data(){
    return{
      uType:'',
    }
  }
};
</script>

<style scoped lang="less">
.menu {
  z-index: 10;
  width: 180px;
  height: 100%;
  background: #fff;
  border-right: 1px solid #dcdee2;
}
.ivu-menu-light.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu):after {
  width: 4px;
  background: linear-gradient(360deg, #00d2e6 0%, #1d86f0 100%);
}
.ivu-icon {
  background-image: linear-gradient(360deg, #00d2e6 0%, #1d86f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>